<template>
  <div class="flex flex-row w-full">
    <div
      class="flex justify-center items-center title-class rounded-l"
      :style="{ width: titleWidth + 'rem', borderRightWidth: right + 'px' }"
    >
      <p>
        {{ title }}
      </p>
    </div>

    <slot></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue-demi";

export default defineComponent({
  props: {
    title: String,
    titleWidth: Number || String,
    hasRight: { type: Boolean, default: false }
  },
  setup(props) {
    const right = props.hasRight ? 1 : 0;
    return {
      right
    };
  }
});
</script>

<style scoped>
.title-class {
  background-color: #f5f7fa;
  color: #9d93a6;
  font-size: 14px;
  border-color: rgb(220, 223, 230);
  border-style: solid;
  border-width: 1px;
}
</style>
